<template>
    <el-upload
            class="upload-demo"
            ref="upload"
            action=""
            multiple
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-change="onChange"
            :file-list="fileList"
            :auto-upload="false">
        <i class="el-icon-paperclip" style="font-size: 25px;color: #00b7ee"></i>
        <div slot="tip" class="el-upload__tip">文件大小不超过50MB</div>

    </el-upload>
</template>

<script>
    export default {
        name: "RxUpload",
        props: {
            action: {
                type: String,
                default: ''
            },
            size: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                fileList: [],
                files: [],
            }
        },
        methods: {
            onChange(file, fileList) {
                this.fileList = fileList
                if (file.size < this.size) {
                    this.files.push(file)
                } else {
                    for (let i = 0; i < this.fileList.length; i++) {
                        if (this.fileList[i].size > this.size) {
                            this.fileList.splice(i, 1)
                        }
                    }
                    this.$message.warning('文件大小超过50MB，重新选择文件！')
                }
            },
            handleChange(file, fileList) {
            },
            handleRemove(file, fileList) {

            },
            handlePreview(file) {

            },

            clearFiles() {
                this.files = []
                this.$refs['upload'].clearFiles()
            }

        }
    }
</script>

<style>
</style>
